<!--
 * @Author: your name
 * @Date: 2020-04-06 22:12:07
 * @LastEditTime: 2020-04-09 09:01:06
 * @LastEditors: your name
 * @Description: In User Settings Edit
 * @FilePath: \vue_blog\src\components\Article.vue
 -->
<template>
  <div class="article_container">
    <el-backtop></el-backtop>
    <div class="article_header">
      <el-row>
        <el-col class="art_title">{{article.title}}</el-col>
      </el-row>
      <el-row type="flex" :gutter="5" justify="start" class="time_tag_class">
        <span class="art_time"> <i class="el-icon-time"></i> Time： {{article.created_time}}</span>
        <span class="art_tag"> <i class="el-icon-paperclip"></i> Tag： {{article.tag}}</span>
        <span class="art_classifica"> <i class="el-icon-tickets"></i> Class： {{article.classifica}}</span>
      </el-row>
    </div>
    <el-card class="article_content">
      <el-row class="art_summary"><span style="font-weight:bolder;color: black;">摘要：</span>{{article.summary}}. . .
      </el-row>
      <el-row class="art_content" v-html="article.content"></el-row>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      article: []
    }
  },
  methods: {},
  mounted() {
    this.article = this.$route.params.article
    console.log(Buffer.isBuffer(this.article.content))
  }
}
</script>
<style lang="less" scoped>
.article_container {
  max-width: 900px;
  margin: 15px auto;
}

.art_title {
  font-size: 24px;
  line-height: 30px;
  height: 30px;
}

.article_header {
  margin: 15px;
}
.time_tag_class {
  margin: 15px 0;
}
.art_time,
.art_tag,
.art_classifica {
  height: 20px;
  line-height: 20px;
  font-size: 14px;
  opacity: 0.5;
  margin-right: 20px;
}

.article_content {
  background-color: rgba(255, 255, 255, 0.3);
  border: none;
  margin: 15px;
  margin-top: 30px;
}

.art_summary {
  padding: 15px;
  border: 1px solid rgba(0, 0, 0, 0.6);
}
</style>
